<!--
 * @Date: 2022-04-22 14:47:36
 * @Author: 陶子
 * @LastEditTime: 2022-09-28 16:51:27
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\warehouseManagement\inventoryQuery\outAndInDetail.vue
 * @pageName: 这是--(新建出入库单详情)--页面
-->
<template>
    <div class="recordDetail">
      <Navbar appTitle="调拨详情" />
      <!--头部-->
      <div class="d-head">
        <div class="content">
          <div class="left">
            <div class="title">{{ detailInfo.orderNumber }}</div>
            <div class="row limitRow" style="margin-top:0.1rem">
              <span class="r-column limitColumn">{{
                detailInfo.allotOrder || "-"
              }}</span>
            </div>
            <div class="row" style="margin-top:0.1rem">
              <span class="r-label">调拨人：</span>
              <span class="r-column">{{ detailInfo.createBy || "-" }}</span>
            </div>
            <div class="row" style="margin-top:0.1rem">
              <span class="r-label">提交时间：</span>
              <span class="r-column">{{ detailInfo.createTime || "-" }}</span>
            </div>
          </div>
          <!-- ids="WMS_STOCK_ALLOT" -->
          <imgStatus
            :flowStatus="detailInfo.flowStatus"
          ></imgStatus>
        </div>
      </div>
      <!-- taps-->
      <div class="tabs-f">
        <div style="background:#fff">
          <div style="width:50%">
            <van-tabs v-model="tabActive">
              <van-tab title="基本信息"></van-tab>
              <van-tab title="调拨明细"></van-tab>
            </van-tabs>
          </div>
        </div>
        <div v-show="tabActive == 0">
          <div class="infoTopBox">
            <div class="itemTopInfo">
              <span class="spanLeft">调拨日期：</span
              ><span class="spanRight">{{ detailInfo.allotTime || "-" }}</span>
            </div>
            <div class="itemTopInfo">
              <span class="spanLeft">调出仓库：</span
              ><span class="spanRight">{{
                detailInfo.outWarehouseName || "-"
              }}</span>
            </div>
            <!-- <div class="itemTopInfo">
              <span class="spanLeft">调出库区：</span
              ><span class="spanRight">{{
                detailInfo.outWarehouseAreaName || "-"
              }}</span>
            </div> -->
            <!-- <div class="itemTopInfo">
              <span class="spanLeft">调出库位：</span
              ><span class="spanRight">{{
                detailInfo.outWarehouseLocationName || "-"
              }}</span>
            </div> -->
            <div class="itemTopInfo">
              <span class="spanLeft">调入仓库：</span
              ><span class="spanRight">{{
                detailInfo.inWarehouseName || "-"
              }}</span>
            </div>
            <!-- <div class="itemTopInfo">
              <span class="spanLeft">调入库区：</span
              ><span class="spanRight">{{
                detailInfo.inWarehouseAreaName || "-"
              }}</span>
            </div> -->
            <!-- <div class="itemTopInfo">
              <span class="spanLeft">调入库位：</span
              ><span class="spanRight">{{
                detailInfo.inWarehouseLocationName || "-"
              }}</span>
            </div> -->
            <div class="itemTopInfo">
              <span class="spanLeft" style="width: 170px">调拨明细记录方式：</span
              ><span class="spanRight"
                >{{
                  detailInfo.type == "automatic_generation"
                    ? "调拨单生效后，自动生成出库记录、入库记录"
                    : "调拨后在出入库查询中手动新建出库单、入库单"
                }}
              </span>
            </div>
          </div>
          <div class="infoBotBox">
            <div class="remarkBox">
              <div class="leftRemark">调拨事由：</div>
              <div class="rightRemark">{{ detailInfo.reason || "-" }}</div>
            </div>
            <div class="remarkBox" style="margin-bottom:0">
              <div class="leftRemark" style="width:0.45rem">附件：</div>
              <div class="rightRemark">
                <upload
                  iconType="fj"
                  :showUpload="false"
                  :fileIds="detailInfo.attachment"
                ></upload>
              </div>
            </div>
          </div>
        </div>
        <div class="listBox" v-show="tabActive == 1">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="(item, index) in goodsList"
              :key="index"
              style="margin-top:0.1rem"
            >
              <!-- <van-cell-group>
                <div class="goodTitleBox" style="padding:0">
                  <div class="label otherText">物品({{ index + 1 }})</div>
                </div>
                <div class="bottomLine"></div>
              </van-cell-group> -->
              <div class="goodBox">
                <div class="goodRight">
                  <div class="icon"></div>
                  <div>
                    <div class="gooodCode">
                      <span class="codeBefore">物品编号：</span
                      ><span class="goodAfter">{{ item.goodsCode || "-" }}</span>
                    </div>
                    <div class="gooodCode">
                      <span class="codeBefore">物品名称：</span
                      ><span class="goodAfter">{{ item.goodsName || "-" }}</span>
                    </div>
                    <div class="gooodCode">
                      <span class="codeBefore">物品规格：</span
                      ><span class="goodAfter">{{ item.spec || "-" }}</span>
                    </div>
                    <div class="gooodCode">
                      <span class="codeBefore">批次编号：</span
                      ><span class="goodAfter">{{
                        item.goodsBatchCode || "-"
                      }}</span>
                    </div>
                    <div class="gooodCode">
                      <span class="codeBefore">调出库区: </span
                      ><span class="goodAfter">{{
                        item.outWarehouseAreaName || "-"
                      }}</span>
                    </div>
                    <div class="gooodCode">
                      <span class="codeBefore">调出库位: </span
                      ><span class="goodAfter">{{
                        item.outWarehouseLocationName || "-"
                      }}</span>
                    </div>
                    <div class="gooodCode">
                      <span class="codeBefore">调入库区: </span
                      ><span class="goodAfter">{{
                        item.inWarehouseAreaName || "-"
                      }}</span>
                    </div>
                    <div class="gooodCode">
                      <span class="codeBefore">调入库位: </span
                      ><span class="goodAfter">{{
                        item.inWarehouseLocationName || "-"
                      }}</span>
                    </div>
                    <div class="gooodCode">
                      <span class="codeBefore">调拨合格品数：</span
                      ><span class="goodAfter"
                        >{{ item.qualifiedNum || "-" }}{{ item.basicUnit }}</span
                      >
                    </div>
                    <div class="gooodCode">
                      <span class="codeBefore">调拨报废品数：</span
                      ><span class="goodAfter"
                        >{{ item.scrapNum || "-" }}{{ item.basicUnit }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </van-cell>
          </van-list>
        </div>
        <div v-if="detailInfo.flowInstId" class="otherMargin"></div>
        <div v-if="detailInfo.flowInstId">
          <!-- ids="WMS_STOCK_ALLOT" -->
          <Examine
            type="2"
            :id="detailInfo.flowInstId"
            ref="examine"
          />
          <div class="ExamineBottom"></div>
          <div
        class="search-bottom"
        v-if="detailInfo.flowStatus == 'RUNNING'"
      >
        <span class="btncancel" @click="cancel">拒绝</span>
        <span class="btnconfirm" @click="confirm">同意</span>
      </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import Navbar from "@/components/navBar/navBar_right";
  import { stockAllotDetail } from "@/api/mobile";
  import { apiBaseUrlDownload } from "@/utils/request";
  import upload from "@/components/upload/upload";
  import Examine from "@/components/examine";
  import imgStatus from "@/components/imgStatus/imgStatus";
  import IMG from "./IMG";
  
  export default {
    name: "customerDetail", //客户详情
    components: { Navbar, upload, IMG, Examine, imgStatus },
    data() {
      return {
        apiBaseUrlDownload,
        imgUrlList: [],
        /*** */
        tabActive: 0,
        parentId: "",
        detailInfo: {},
        current: 1,
        pageSize: 15,
        loading: false,
        finished: false,
        goodsList: [],
      };
    },
    computed: {},
    mounted() {},
    created() {
      this.detailType = this.$route.query.detailType;
      this.parentId = this.$route.query.id;
      console.log(this.$route.query,'this.$route.query')
      this.getDetail();
    },
    methods: {
      // 获取详情
      getDetail() {
        let obj = {
          id: this.parentId,
        };
        stockAllotDetail(obj).then((res) => {
          if (res.success) {
            if (res.result) {
              this.detailInfo = res.result;
              this.goodsList = res.result.stockAllotGoodDetailList;
              console.log("!@@@@@@@@@@@", this.goodsList);
            }
          } else {
            this.$toast(res.message);
          }
        });
      },
  
      onLoad() {
        console.log("这里执行了");
      },
      cancel () {
        // approveType 1:同意 0:拒绝
        this.$router.push({
          path: "/approval",
          query: { approveType: 0, taskId:this.$route.query.taskId },
        });
      },
      confirm () {
        // approveType 1:同意 0:拒绝
        this.$router.push({
          path: "/approval",
          query: { approveType: 1, taskId: this.$route.query.taskId },
        });
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  @import "@/views/workManagement/materialRequisition/materialDetail.scss";
  
  .content {
    margin-left: 0 !important;
  }
  
  .icon {
    width: 0.03rem;
    height: 0.16rem;
    background: #1890ff;
    margin-top: 0.03rem;
    margin-right: 0.1rem;
  }
  
  // 盘点物品样式
  
  .left {
    width: 3.4rem !important;
  }
  
  .recordDetail {
    position: relative;
  }
  
  .tabs-f {
    position: relative;
    top: 1.35rem;
  }
  
  .infoTopBox {
    background-color: #fff;
    box-sizing: border-box;
    padding: 0.16rem;
    margin-top: 0.1rem;
  
    .itemTopInfo {
      margin-top: 0.1rem;
      font-size: 0.14rem;
      color: #888888;
      display: flex;
  
      &:nth-child(1) {
        margin-top: 0;
      }
  
      .spanLeft {
      }
  
      .spanRight {
        color: #191f25;
      }
    }
  }
  
  div.infoBotBox {
    background-color: #fff;
    box-sizing: border-box;
    padding: 0.16rem;
    margin-top: 0.1rem;
  
    div.remarkBox {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      font-size: 0.14rem;
      color: #888888;
      display: flex;
      margin-bottom: 0.1rem;
  
      div.leftRemark {
        width: 0.7rem;
      }
  
      div.rightRemark {
        flex: 1;
        color: #191f25;
      }
    }
  }
  
  .listBox {
    // height: calc(100vh - 2.5rem);
    overflow: auto;
  }
  
  div.goodBox {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 0.06rem 0;
  
    img.goodLeft {
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 0.02rem;
    }
  
    div.goodRight {
      flex: 1;
      //margin-left: 0.1rem;
      display: flex;
  
      div.gooodName {
        width: 90%;
        font-size: 0.16rem;
        font-weight: 500;
        color: #191f25;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-bottom: 0.1rem;
      }
  
      div.gooodCode {
        margin-bottom: 0.1rem;
  
        span.codeBefore {
          font-size: 0.14rem;
          color: #888888;
        }
  
        span.goodAfter {
          //font-size: 0.16rem;
          color: #191f25;
        }
      }
  
      div.goodSpec {
        margin-bottom: 0.1rem;
  
        span.specBefore {
          font-size: 0.14rem;
          color: #888888;
        }
  
        span.specAfter {
          font-size: 0.16rem;
          color: #191f25;
        }
      }
  
      div.numberBox {
        box-sizing: border-box;
        padding: 0.1rem 0;
        border-top: 0.01rem solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
  
        div.numTopBox {
          flex: 1;
  
          div.topTop {
            font-size: 0.14rem;
            color: #888888;
            margin-bottom: 0.1rem;
          }
  
          div.topBot {
            font-size: 0.16rem;
            color: #191f25;
          }
        }
      }
    }
  }
  
  .limitRow {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  
    .limitLabel {
      // width: 0.8rem;
    }
  
    .limitColumn {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  
  .haveBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  
  .haveColor {
    box-sizing: border-box;
    padding: 0.02rem 0.05rem;
    background-color: #ffe9e9;
    color: #ff3b84;
    margin-top: 0.06rem;
  }
  .otherMargin {
    height: 0.1rem;
    background: #f5f5f5;
  }
  .ExamineBottom {
    height: 0.5rem;
  }
  </style>
  